const MapLoadMoreMixin = {
    data(){
        return {
            // 加载跟多方法参数
            loadmoreOptions: {
                disabled: false,
                callback: this.loadmore
            },
            currentPage: 0, // 第几页
            pageNum: 500, // 一页多少条
            total: 0, // 总页数
            mapDotList: [], // 当前聚合点数据列表
            mapListType: ''
        }
    },
    methods: {
        clustererFun(e, data, type){
            // 清除之前内容
            this.mapListType = type;
            type === 'task' ? this.customerList = [] : this.taskList = [];
            this.mapDotList = [];
            this.currentPage = 0;
            
            const { lng, lat } = e?.lnglat || {};

            // 获取当前位置数据
            let key = this.generateKey(lng, lat);
            this.mapDotList = data[key] || [];
            // 总页码
            this.total = this.mapDotList.length / this.pageNum;
            if(this.total.toString().indexOf(".") != -1) this.total = parseInt(this.total) + 1;

            this.loadmore(type);
        },
        // 数据量过大 使用加载更多
        loadmore(){
            if(this.currentPage >= this.total) return;
    
            const start = this.currentPage * this.pageNum;
            const list = this.mapDotList.slice(start, this.pageNum + start);

            // 区分工单地图和客户地图
            if(this.mapListType === 'task'){
                this.taskList.push(...list)
            }else {
                this.customerList.push(...list)
            }
    
            this.currentPage++;
        },
        generateKey(lng, lat){
            return `lng_${lng}_lat_${lat}`;
        }
    }
}

export default MapLoadMoreMixin;